<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>电影天堂 - 看电影就上电影天堂</title>
    <link href="/css/style.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <script src="/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}"></script>
</head>
<body>
<header th:replace="~{top}"></header>
<section class="movie-detail">
    <div class="container">
        <div class="movie-header">
            <div class="movie-poster">
                <img alt="电影海报" th:src="'/image/'+${movie.coverUrl}">
                <div th:class="'movie-vip-badge '+${movie.vip ? 'vip' : 'free'}"
                     th:text="${movie.vip ? 'VIP' : '免费'}"></div>
            </div>
            <div class="movie-info">
                <h1 id="movie-title" th:text="${movie.title}">电影标题</h1>
                <div class="movie-meta">
                    <span class="rating"><i class="fas fa-star"></i> <span id="movie-rating" th:text="${movie.rating}">8.5</span></span>
                    <span class="year"><i class="fas fa-calendar"></i> <span id="movie-year"
                                                                             th:text="${movie.releaseDate}">2023</span></span>
                    <span class="genre"><i class="fas fa-tags"></i> <span id="movie-genre" th:text="${movie.type}">动作, 冒险</span></span>
                    <span class="duration"><i class="fas fa-clock"></i> <span id="movie-duration"
                                                                              th:text="${movie.duration}+' 分钟'">120分钟</span></span>
                </div>
                <div class="movie-actions" th:if="${session.user}">
                    <a class="btn btn-primary" th:href="'/movie/play?id='+${movie.id}"
                       th:if="${movie.vip&&session.user.vipDuration>0||!movie.vip}"><i class="fas fa-play"></i> 播放</a>
                    <a class="btn btn-secondary" th:if="${movie.vip&&session.user.vipDuration<=0}">此电影为VIP专享</a>
                    <a class="btn btn-outline" th:href="'/user/like?movieId='+${movie.id}"
                       th:unless="${session.userFavorites.contains(movie.id)}"><i class="fas fa-heart"></i> 收藏</a>
                    <a class="btn btn-outline" th:href="'/user/dislike?movieId='+${movie.id}"
                       th:if="${session.userFavorites.contains(movie.id)}"><i class="fas fa-heart"></i> 取消收藏</a>
                </div>
                <div class="movie-actions" th:unless="${session.user}">
                    <a class="btn btn-primary" href="/user/login">请先登录</a>
                </div>
            </div>
        </div>

        <div class="movie-tabs">
            <nav class="tabs">
                <button class="tab-btn active" data-tab="overview">简介</button>
                <button class="tab-btn" data-tab="cast">演员表</button>
                <button class="tab-btn" data-tab="trailers">预告片</button>
                <button class="tab-btn" data-tab="reviews">评论</button>
            </nav>

            <div class="tab-content active" id="overview">
                <h3>剧情简介</h3>
                <p id="movie-description" th:text="${movie.description}">这里是电影的详细剧情简介...</p>

                <div class="movie-details">
                    <div class="detail-item">
                        <span class="detail-label">导演:</span>
                        <span><a id="movie-director" th:href="'/search?query='+${movie.director}"
                                 th:text="${movie.director}">导演姓名</a></span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">编剧:</span>
                        <span id="movie-writer" th:text="${movie.scriptwriter}">编剧姓名</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">主演:</span>
                        <span th:each="actor:${actors}"
                              th:text="${actor.firstName}+'·'+${actor.lastName}+'&nbsp;&nbsp;'">演员1, 演员2, 演员3</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">类型:</span>
                        <span id="movie-types" th:text="${movie.type}">动作, 冒险, 科幻</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">地区:</span>
                        <span id="movie-region" th:text="${movie.region}">中国</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">语言:</span>
                        <span id="movie-language" th:text="${movie.language}">中文</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">上映日期:</span>
                        <span id="movie-release-date" th:text="${movie.releaseDate}">2077-01-01</span>
                    </div>
                </div>
            </div>

            <div class="tab-content" id="reviews">
                <h3>观众评论 <span class="comment-count" th:text="${#lists.size(comments)} + ' 条'">0 条</span></h3>

                <div class="comments-container" th:if="${not #lists.isEmpty(comments)}">
                    <div class="comment-item" th:each="comment : ${comments}">
                        <div class="comment-header">
                            <h4 class="user-id" th:text="|用户 ${comment.userId}|">用户 #123</h4>
                            <span class="comment-time" th:text="${comment.createdDate}">2025-05-24 14:20</span>
                        </div>
                        <div class="comment-content" th:text="${comment.content}">
                            这是一条非常精彩的电影评论，用户表达了观看后的深刻感受...
                        </div>
                    </div>
                </div>

                <div class="no-comments" th:unless="${not #lists.isEmpty(comments)}">
                    <i class="fas fa-comment-slash"></i>
                    <p>暂无评论，快来发表第一篇观影感受吧！</p>
                </div>

                <div class="comment-form" th:if="${session.user}">
                    <form id="commentForm">
                        <input name="movieId" th:value="${movie.id}" type="hidden">
                        <div class="form-group">
                            <label>
                            <textarea
                                    class="form-control"
                                    maxlength="500"
                                    minlength="5"
                                    name="content"
                                    placeholder="写下你的观影感受..."
                                    required></textarea>
                            </label>
                            <div class="char-count">
                                <span>500</span>字以内
                            </div>
                        </div>
                        <button class="btn btn-primary" disabled type="submit">发布评论</button>
                    </form>
                </div>

                <div class="login-prompt" th:unless="${session.user}">
                    <p>登录后可发表评论 <a class="btn btn-primary" href="/user/login">立即登录</a></p>
                </div>
            </div>

            <div class="tab-content" id="cast">
                <h3>演员表</h3>

                <div class="cast-container">
                    <div class="actor-item" th:each="actor : ${actors}">
                        <div class="actor-info">
                            <h4 class="actor-name" th:text="${actor.firstName} + ' ' + ${actor.lastName}">张三</h4>
                            <p class="actor-nationality" th:text="${actor.nationality}">国籍</p>
                            <p class="actor-birthday" th:text="${actor.birthday}">生日</p>
                        </div>
                    </div>

                    <div class="no-actors" th:unless="${not #lists.isEmpty(actors)}">
                        <i class="fas fa-users-slash"></i>
                        <p>暂无演员信息</p>
                    </div>
                </div>
            </div>

            <div class="tab-content" id="trailers">
                <div class="trailers-container">
                    <h3>预告片</h3>
                    <div><p>暂无预告片</p></div>


                    <!-- 其他标签内容 -->
                </div>
            </div>
        </div>
    </div>
</section>

<section class="related-movies">
    <div class="container">
        <h2>相关电影</h2>
        <div class="container">
            <div class="movie-grid" id="related-movies-grid">
                <div class="movie-card" th:each="relatedMovie : ${relatedMovies}"
                     th:if="${#lists.size(relatedMovies) > 0}"
                     th:onclick="|location.href='/movie/detail?id='+${relatedMovie.id}|">
                    <div class="movie-poster">
                        <img th:alt="${relatedMovie.title}" th:src="'/image/'+${relatedMovie.coverUrl}">
                        <div th:class="'movie-vip-badge '+${relatedMovie.vip ? 'vip' : 'free'}"
                             th:text="${relatedMovie.vip ? 'VIP' : '免费'}"></div>
                    </div>
                    <div class="movie-info">
                        <h3 class="movie-title" th:text="${relatedMovie.title}"></h3>
                        <div class="movie-meta">
                            <span th:text="${relatedMovie.rating}"><i class="fas fa-star"></i></span>
                            <span th:text="${relatedMovie.type}"></span>
                            <span th:text="${relatedMovie.releaseDate}"><i class="fas fa-calendar"></i> </span>
                        </div>
                    </div>
                </div>

                <div class="no-related" th:unless="${#lists.size(relatedMovies) > 0}">
                    <i class="fas fa-film"></i>
                    <p>暂无相关电影推荐</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 在 </body> 前添加以下代码 -->

<script src="/js/main.js"></script>
<script src="/js/movies.js"></script>
</body>
</html>
